<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 创建 -->
    <h2>创建</h2>
    <div id="app2">这是spp2</div>
    <script>
        let app2 = document.querySelector('#app2')
        let span2 = document.createElement('span')
        span2.innerHTML = 'houdunren你好'
        app2.append(span2);
    </script>
    <hr>
    <!--  
        节点属性 	             说明
        parentElement 	        获取父元素
        children 	            获取所有子元素
        previousElementSibling 	上一个兄弟标签
        nextElementSibling 	    下一个兄弟标签
        childElementCount 	    子标签元素的数量
        firstElementChild 	    第一个子标签
        lastElementChild 	    最后一个子标签
        contains 	            返回布尔值，判断传入的节点是否为该节点的后代节点
     -->
    <!--查  -->
    <h2>查</h2>
    <div id="app">
        <div class="houdunren" data="hd">houdunren.com</div>
        <div class="houdunwang">houdunwang.com</div>
        <div class="xiangjun">
            <!-- 向军大叔 -->
        </div>
    </div>
    <script>
        const app = document.querySelector(`#app`)
        console.log(app.children) //所有子元素
        console.log(app.firstElementChild) //第一个子元素 div.houdunren
        console.log(app.lastElementChild) //最后一个子元素 div.xiangjun

        const houdunwang = document.querySelector('.houdunwang')
        console.log(houdunwang.parentElement) //父元素 div#app

        console.log(houdunwang.previousElementSibling) //上一个兄弟元素 div.houdunren
        console.log(houdunwang.nextElementSibling) //下一个兄弟元素 div.xiangjun
    </script>
    <hr>

    <!-- 改 -->
    <!-- 改属性 -->
    <h2>改</h2>
    <div id="app1">
        <div data="hd1">houdunren.com</div>
        <div>houdunwang.com</div>
    </div>
    <script>
        const app1 = document.querySelector(`#app1`)
        app1.className = 'houdunren2';
    </script>
    <div id="app3">
        <div data="hd">houdunren.com</div>
        <div>houdunwang.com</div>
    </div>
    <script>
        const app3 = document.querySelector(`#app3`)
        app3.setAttribute('className', "houdunren3");
    </script>
    <!-- 改内容:替换 -->
    <div id="app4">
        houdunren.com
    </div>
    <script>
        let app4 = document.querySelector('#app4')
        let h4 = document.createElement('h4')
        h4.append('houdunwang.com改内容4');
        app4.replaceWith(h4);
    </script>
    <div id="app5">
        houdunren.com
    </div>
    <script>
        let app5 = document.querySelector('#app5')
        let h5 = document.createElement('h4')
        h5.append('houdunwang.com改内容5');
        app5.innerHTML = h5.innerHTML;
    </script>
    <hr>

    <!-- 增 -->
    <h2>增</h2>
    <div id="app6">
        这里是元素
    </div>
    <script>
        let app6 = document.querySelector('#app6')

        //插入字符串或节点,不能够直接解析html标签,所以需要创建
        let afterDom = "<h5>"
            afterDom += "-houdunwang.com6元素本身后面</h5>"

        let beforep=document.createElement('p');
        beforep.className='beforep';
        beforep.innerHTML='-houdunwang.com6元素本身前面';  

        app6.before(beforep);
        app6.prepend('-houdunwang.com6元素内部前面')
        //用古老的方式只能插入节点,不能够直接插入字符串appendChild
        app6.append('-houdunwang.com6元素内部后面')
        app6.after(afterDom)
        
        //会解析html标签
        let before6='本身'
        let beforebegin6='<h4>'+
                '元素'+before6+'前面'+
                '</h4>'

        let abgin='内部'
        let afterbegin6=`
            <div>
                <h4>
                    元素${abgin}前面
                </h4>        
            </div>
        `
        let afterend6='<div>'
            afterend6+='<h4>元素本身后面</h4>'
            afterend6+='</div>'
        app6.insertAdjacentHTML('beforebegin', beforebegin6)
        app6.insertAdjacentHTML('afterbegin', afterbegin6)
        app6.insertAdjacentHTML('beforeend', '<h4>元素内部后面</h4>')
        app6.insertAdjacentHTML('afterend', afterend6)
    </script>
    <hr>

    <!-- 删除 -->
    <h2>删除</h2>
    <div id="app7">
        <p>删除</p>
        <p>这是药删除的节点1</p>
        <span>这是药删除的节点2</span>
    </div>
    <script>
        //直接删
        let app7 = document.querySelector('#app7>p:nth-of-type(2)')
        app7.remove();//第二个p已经删除了

        //先获取父元素,再获取本身元素,根据父元素来删
        let Fuapp7=document.querySelector('#app7');
        let chapp7=document.querySelector('#app7>span')
        Fuapp7.removeChild(chapp7);//span也已经删除
    </script>
    <hr>

    <!-- 复制,克隆 -->
    <h2>复制</h2>
    <div id="app8">复制,克隆1</div>
    <script>
        let app8 = document.querySelector('#app8')
        let newApp8 = app8.cloneNode(true)
        document.body.appendChild(newApp8)
    </script>
</body>

</html>